<template>
  <div class="market">
    <el-form :model="otherUrlObject" size="mini" label-width="100px" disabled>
      <el-form-item :label="$t('market.creator')">
        <el-input v-model="otherUrlObject.fcreator" />
      </el-form-item>
      <el-form-item :label="$t('market.createDate')">
        <el-input v-if="otherUrlObject.fcreateDate" v-model="otherUrlObject.fcreateDate" />
        <el-input v-else v-model="otherUrlObject.fcreatedate" />
      </el-form-item>
      <el-form-item :label="$t('market.modifier')">
        <el-input v-model="otherUrlObject.fmodifier" />
      </el-form-item>
      <el-form-item :label="$t('market.modifyDate')">
        <el-input v-if="otherUrlObject.fmodifyDate" v-model="otherUrlObject.fmodifyDate" />
        <el-input v-else v-model="otherUrlObject.fmodifydate" />
      </el-form-item>
      <el-form-item :label="$t('market.approver')">
        <el-input v-model="otherUrlObject.fapprover" />
      </el-form-item>
      <el-form-item :label="$t('market.approveDate')">
        <el-input v-if="otherUrlObject.fapproveDate" v-model="otherUrlObject.fapproveDate" />
        <el-input v-else v-model="otherUrlObject.fapprovedate" />
      </el-form-item>
      <el-form-item :label="$t('market.forbider')">
        <el-input v-model="otherUrlObject.fforbider" />
      </el-form-item>
      <el-form-item :label="$t('market.forbidDate')">
        <el-input v-if="otherUrlObject.fforbidDate" v-model="otherUrlObject.fforbidDate" />
        <el-input v-else v-model="otherUrlObject.fforbiddate" />
      </el-form-item>
      <el-form-item :label="$t('market.closeor')">
        <el-input v-model="otherUrlObject.fcloser" />
      </el-form-item>
      <el-form-item :label="$t('market.closeyDate')">
        <el-input v-if="otherUrlObject.fcloserDate" v-model="otherUrlObject.fcloserDate" />
        <el-input v-else v-model="otherUrlObject.fcloserdate" />
      </el-form-item>
    </el-form>
    <div>
      <jc-table
        serial
        :table-header="logTableHeader"
        :table-data="otherLogTableData"
        :table-height="otherHeight"
      />
    </div>
    <jc-pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="size"
      @pagination="otherlog"
    />
  </div>
</template>

<script>
import { querySalOrderLog } from '@/api/marketManage/marketOrder'

export default {
  name: 'Marker',
  props: {
    otherUrlObject: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    },
    otherHeight: {
      type: [String, Number],
      default: ''
    },
    fnumber: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 其它表单
      otherOptions: {},
      otherValue: {
        fcreator: '',
        fcreateDate: '',
        fmodifier: '',
        fmodifyDate: '',
        fapprover: '',
        fapproveDate: '',
        fforbider: '',
        fforbidDate: ''
      },
      pageNum: 1,
      size: 200,
      total: 0,
      otherLogTableData: [],
      // 日志头部
      logTableHeader: [
        { label: this.$t('market.fdate'), prop: 'createDate' },
        { label: this.$t('market.operator'), prop: 'fname' },
        { label: this.$t('market.deaprt'), prop: 'fdeaprt' },
        { label: this.$t('market.ipSite'), prop: 'fip' },
        { label: this.$t('market.describe'), prop: 'fdescribe' }
      ]
    }
  },
  watch: {
    otherUrlObject: {
      handler(val) {
        this.otherValue = val
      },
      // 是否一开始就监视
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 获取操作记录
    async otherlog() {
      const DATA = { pageNum: this.pageNum, pageSize: this.size, fbillNo: this.fnumber }
      const { data: RES } = await querySalOrderLog(DATA)
      this.total = RES.total
      this.otherLogTableData = RES.array
    }
  }
}
</script>

<style lang="scss" scoped>
.market {
  .el-form {
    display: flex;
    flex-wrap: wrap;
    .el-form-item {
      height: 35px;
      width: 275px;
      min-width: 12.792vw!important;
      margin-bottom: 5px;
    }
  }
}
</style>
